<template>
	<div class="p_adress">
		<div class="p_user_return">
			<a href="javascript:history.back(-1)"><img src="../../assets/login/返回.png" /></a>
			<span>编辑地址</span>
			<a href="#/shouhuodizhiguanli"><span style="font-size: 1rem;">自动获取地址</span></a>
		</div>
		<div class="p_adress_name">
			<span>联系人:</span>
			<input type="text" placeholder="请填写收货人姓名" v-model="name" />
		</div>
		<div class="p_adress_gender">
			<span>性别:</span>
			<input id="qa" @change="get" type="radio" checked name="sex" value='男士'/><label>男士</label>
			<input id="qa1" @change="get1" type="radio" name="sex" value="女士"/><label>女士</label>
		</div>
		<div class="p_adress_name">
			<span>手机号:</span>
			<input type="text" placeholder="请填写收货手机号" v-model="phone" />
		</div>
		<div class="p_adress_name">
			<span>收货地址:</span>
			<br />
			<div class="place">
				<v-distpicker @selected="onSelected" class='v-distpicker'></v-distpicker>
			</div>

		</div>
		<div class="p_adress_menpai">
			<span>门牌号:</span>
			<input id="cc" type="text" placeholder="例: 16号楼5层301室" v-model="arr" @keyup="change" />
		</div>
		<p class="dizhi_span" >你选择的地址是:<em></em></p>
		<a id="getdizhi" @click="getdizhi()"><button>保存地址</button></a>
	</div>
</template>

<script>
	import VDistpicker from 'v-distpicker'
	export default {
		data() {
			return {
				arr: "",
				arr1: '',
				name: "",
				phone: "",
				href:"#/usergeren"
			}
		},

		methods: {
			onSelected(data) {
				this.arr1 = data.province.value + " " + data.city.value + " " + data.area.value;
			},
			change: function() {
				var str = this.arr1 + this.arr;
				$(".dizhi_span em").html(str)
			},
			get:function(){
				console.log($("#qa").val())
			},
			get1:function(){
				console.log($("#qa1").val())
			},
			getdizhi:function(){
				var arr1 = /^((1[3,5,8][0-9])|(14[5,7])|(17[0,6,7,8])|(19[7]))\d{8}$/;
				if(!arr1.test(this.phone)) {
					console.log("请输入正确的手机号");
				} else {
					$("#getdizhi").attr("href",this.href);
				}
			}
		},
		components: {
			VDistpicker
		},
		mounted(){
			$(function(){
		console.log($("#qa").val())
	        })
		}
	}
</script>

<style scoped>
	.p_user_return {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 95%;
		margin: auto;
	}
	
	.p_user_return img {
		width: 70%;
		height: 70%;
		margin: 2%;
	}
	
	.p_user_return span {
		display: inline-block;
		font-size: 2rem;
	}
	
	.p_user_return a:nth-child(3) {
		color: red;
	}
	
	.p_adress_name {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		height: 5rem;
		border-bottom: 1px solid #CCCCCC;
	}
	
	.p_adress_name span {
		display: block;
		font-size: 1.5rem;
		margin-left: 5%;
	}
	
	.p_adress_name input {
		width: 70%;
		height: 2rem;
		outline: none;
	}
	
	.p_adress_name select {
		width: 25%;
	}
	
	.p_adress_gender {
		margin: auto;
		line-height: 5rem;
		height: 5rem;
		border-bottom: 1px solid #CCCCCC;
	}
	.p_adress_gender span{
		margin-left: 5%;
		font-size: 1.5rem;
		
	}
	
	.p_adress button {
		margin-top: 8%;
		width: 80%;
		height: 40px;
		background-color: rgb(255, 129, 173);
		border-radius: 20px;
		border: none;
		outline: none;
		color: white;
		margin-left: 10%;
	}
	
	.p_adress_menpai {
		margin: auto;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		height: 5rem;
		border-bottom: 1px solid #CCCCCC;
	}
	
	.p_adress_menpai span {
		display: block;
		font-size: 1.5rem;
		margin-left: 5%;
	}
	
	.p_adress_menpai input {
		width: 70%;
		height: 2rem;
		border: none;
		outline: none;
	}
	
	.place>>>.distpicker-address-wrapper select {
		width: 6rem;
		height: 3rem;
		padding: 0;
	}
	
	.dizhi_span {
		display: block;
		font-size: 1.5rem;
		line-height: 5rem;
		border-bottom: 1px solid #CCCCCC;
		color: black;
		padding-left: 5%;
		vertical-align: 5%;
	}
	
	.dizhi_span em {
		font-style: normal;
		width: 15rem;
		color: red;
		text-align: left;
		display: inline-block;
		line-height: 1.5rem;
	}
</style>